<script setup lang="ts">
window._AMapSecurityConfig = {
  securityJsCode: 'bb00c2d906a9313383396b8e60aea5b4'
}
import AMapLoader from '@amap/amap-jsapi-loader'

import { ref, onMounted } from 'vue'
import type { Logistics, Location } from '@/types/order'
import { getLogistics } from '@/services/order'
import { useRoute } from 'vue-router'
import startImg from '../../assets/start.png'
import endImg from '../../assets/end.png'
import carImg from '../../assets/car.png'
const route = useRoute()
const logistics = ref<Logistics>()
const initData = async () => {
  let id = route.params.id
  const { data } = await getLogistics(id as string)
  logistics.value = data
}

const isToLeft = ref<boolean>(false)
onMounted(async () => {
  await initData()
  // 加载高德地图时，必须等上面的初始化数据完成之后，才能加载
  // ... 省略 ...
  AMapLoader.load({
    key: '55bd16dc2b6ccddccf14db966e934861',
    version: '2.0'
  }).then((AMap) => {
    // 使用 Amap 初始化地图
    const map = new AMap.Map('map', {
      // 地图样式
      mapStyle: 'amap://styles/whitesmoke',
      // 缩放级别
      zoom: 12
    })
    AMap.plugin('AMap.Driving', function () {
      // 驾驶路线规划
      var driving = new AMap.Driving({
        map: map,
        showTraffic: false,
        hideMarkers: true
      })

      if (logistics.value && logistics.value.logisticsInfo.length >= 2) {
        let endPoint = logistics.value.logisticsInfo[0] // 终点
        let startPoint =
          logistics.value.logisticsInfo[
            logistics.value.logisticsInfo.length - 1
          ] // 起点
        console.log(startPoint, endPoint)
        // 起点和终点的经纬度数组
        let startLngLat = [startPoint!.longitude, startPoint!.latitude]
        let endLngLat = [endPoint!.longitude, endPoint!.latitude]
        // 判断小车车头朝向
        isToLeft.value = startPoint!.longitude > endPoint!.longitude
        // 根据起终点经纬度规划驾车导航路线
        driving.search(
          startLngLat,
          endLngLat,
          // 添加轨迹的途径点
          {
            waypoints: logistics.value.logisticsInfo
              .map((item) => [item.longitude, item.latitude])
              .reverse()
          },
          function () {
            // 生成标记的函数 传入经纬度和图片地址
            const getMarker = (
              point: Location,
              image: string,
              width = 25,
              height = 30
            ) => {
              // 生成图标
              const icon = new AMap.Icon({
                size: new AMap.Size(width, height),
                image,
                imageSize: new AMap.Size(width, height)
              })
              // 生成标记
              const marker = new AMap.Marker({
                position: [point?.longitude, point?.latitude],
                icon: icon,
                offset: new AMap.Pixel(-width / 2, -height)
              })
              return marker
            }
            // 生成起点标记
            const startMarker = getMarker(startPoint!, startImg)
            // 生成终点标记
            const endMarker = getMarker(endPoint!, endImg)

            // 获取车辆当前的位置
            const current = logistics.value?.currentLocationInfo
            // 生成车辆标记
            const carMarker = getMarker(current!, carImg, 33, 20)
            // 将起点和终点标记添加到地图上
            map.add([startMarker, endMarker, carMarker])

            setTimeout(() => {
              map.setFitView([carMarker])
              map.setZoom(10)
            }, 3000)
          }
        )
      }
    })
  })
})
</script>

<template>
  <div class="order-logistics-page">
    <div id="map" :class="{ toleft: isToLeft }">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>{{ logistics?.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">
          订单{{ logistics?.statusValue }} 预计{{
            logistics?.estimatedTime
          }}送达
        </p>
        <p class="predict">
          <span>{{ logistics?.name }}</span>
          <span>{{ logistics?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logistics?.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
.toleft {
  :deep() .amap-marker:nth-child(3) img {
    transform: rotateY(180deg);
  }
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
